<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="16" style="margin-bottom: 10px;">
      <!-- 合同履行数 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">合同履行数</div>
          <div class="panel-value count-to" :data-value="1200000" style="color: black;font-weight: 800;text-align: center;line-height: 200px;font-size: 40px">2</div>
<!--          <div class="panel-desc">履行合同</div>-->
        </div>
      </el-col>
      <!-- 全年应收租金 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">全年应收租金</div>
          <div class="panel-value count-to" :data-value="1200000" style="color: red;font-weight: 800;text-align: center;line-height: 200px;font-size: 40px">1200000.00</div>
<!--          <div class="panel-desc">全年预计收入</div>-->
        </div>
      </el-col>
      <!-- 资产数量（产权划分） -->
      <el-col :span="12">
        <div class="panel-card">
          <div class="panel-title">资产数量（产权划分）</div>
          <div id="asset-type-chart" style="width: 100%; height: 160px;"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16" style="margin-bottom: 10px;">
      <!-- 本月应收租金 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">本月应收租金</div>
          <div class="panel-value count-to" :data-value="20000" style="color: blue;font-weight: 800;text-align: center;line-height: 200px;font-size: 40px">20000.00</div>
<!--         <div class="panel-desc">本月应收</div>-->
        </div>
      </el-col>
      <!-- 本月已收租金 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">本月已收租金</div>
          <div class="panel-value count-to" :data-value="20000" style="color: blue;font-weight: 800;text-align: center;line-height: 200px;font-size: 40px">20000.00</div>
<!--          <div class="panel-desc">本月已收</div>-->
        </div>
      </el-col>
      <!-- 本月新签 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">本月新签</div>
          <div class="panel-value count-to" :data-value="20000" style="color: green;font-weight: 800;text-align: center;line-height: 200px;font-size: 40px">0</div>
<!--          <div class="panel-desc">新签合同总计金额</div>-->
        </div>
      </el-col>
      <!-- 资产盘存 -->
      <el-col :span="6">
        <div class="panel-card">
          <div class="panel-title">资产盘存</div>
          <div id="asset-inventory-chart" style="width: 100%; height: 160px;"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16" style="margin-bottom: 10px;">
      <!-- 租赁收取率 -->
      <el-col :span="8">
        <div class="panel-card">
          <div class="panel-title">租赁收取率</div>
          <div id="rental-collection-rate-chart" style="width: 100%; height: 220px;"></div>
        </div>
      </el-col>
      <!-- 资产属地 -->
      <el-col :span="8">
        <div class="panel-card">
          <div class="panel-title">资产属地</div>
          <div id="asset-location-chart" style="width: 100%; height: 220px;"></div>
        </div>
      </el-col>
      <!-- 房屋用途 -->
      <el-col :span="8">
        <div class="panel-card">
          <div class="panel-title">房屋用途</div>
          <div id="house-purpose-chart" style="width: 100%; height: 220px;"></div>
        </div>
      </el-col>
    </el-row>
    <div class="dateSelect" style="position: absolute; right: 20px; top: 10px; z-index: 100;">
      <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="small"></el-date-picker>
    </div>
    <p class="componey">{{sysConfig.copyright}}</p>
  </div>
</template>

<script>
import echarts from 'echarts'
import CountTo from 'vue-count-to'
export default {
  name: 'DashboardAdmin',
  components: {
    CountTo
  },
  data() {
    return {
      value1: '',
      sysConfig: {
        // copyright: '版权所有 xxx 公司' // 模拟版权信息
      }
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 资产数量（产权划分）柱状图
      const assetTypeChart = echarts.init(document.getElementById('asset-type-chart'))
      assetTypeChart.setOption({
        xAxis: {
          type: 'category',
          data: ['代营', '渝海']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计数',
            type: 'bar',
            data: [1, 2],
            itemStyle: {
              color: '#13c2c2'
            }
          }
        ]
      })

      // 资产盘存饼图
      const assetInventoryChart = echarts.init(document.getElementById('asset-inventory-chart'))
      assetInventoryChart.setOption({
        series: [
          {
            name: '资产盘存',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 1, name: '出租' },
              { value: 1, name: '闲置' },
              { value: 1, name: '租赁' }
            ],
            label: {
              show: true,
              formatter: '{b}: {d}%'
            }
          }
        ]
      })

      // 租赁收取率柱状图
      const rentalCollectionRateChart = echarts.init(document.getElementById('rental-collection-rate-chart'))
      rentalCollectionRateChart.setOption({
        xAxis: {
          type: 'category',
          data: ['苏豪川']
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          {
            name: '租金收取率',
            type: 'bar',
            data: [100],
            itemStyle: {
              color: '#c28661'
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            }
          }
        ]
      })

      // 资产属地柱状图
      const assetLocationChart = echarts.init(document.getElementById('asset-location-chart'))
      assetLocationChart.setOption({
        xAxis: {
          type: 'category',
          data: ['龙溪小学', '双龙湖街道']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计数',
            type: 'bar',
            data: [1, 2],
            itemStyle: {
              color: '#2f54eb'
            }
          }
        ]
      })

      // 房屋用途柱状图
      const housePurposeChart = echarts.init(document.getElementById('house-purpose-chart'))
      housePurposeChart.setOption({
        xAxis: {
          type: 'category',
          data: ['代营', '渝海']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '商业',
            type: 'bar',
            data: [1, 2],
            itemStyle: {
              color: '#fa8c16'
            }
          },
          {
            name: '住宅',
            type: 'bar',
            data: [0, 0],
            itemStyle: {
              color: '#2f54eb'
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #ebeef5;
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: calc(100vh - 64px);
  padding: 20px;
  box-sizing: border-box;
}

.panel-card {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  height: 250px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.panel-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.panel-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.panel-desc {
  font-size: 12px;
  color: #666;
}

.componey {
  font-size: 14px;
  text-align: center;
  color: #999;
  padding-bottom: 10px;
  margin-top: 20px;
}

.dateSelect {
  .el-date-editor {
    width: 160px;
  }
}
</style>
